<template>
  <div class="page">
    <div class="c-main p20">
      <div class="c-body">
        <el-row type="flex" justify="center">
          <el-col :span="24">
            <el-form
              ref="submitForm"
              :model="pageAjax.data"
              :rules="pageAjax.rules"
              label-width="120px"
            >
              <div class="block">
                <el-form-item
                  label="昵称："
                  class="inlineBlock"
                  prop="realName"
                >
                  <el-input placeholder="昵称" v-model="pageAjax.data.realName">
                  </el-input>
                </el-form-item>
                <el-form-item label="微信号：" class="inlineBlock" prop="wxNo">
                  <el-input
                    placeholder="微信号"
                    v-model="pageAjax.data.wxNo"
                  ></el-input>
                </el-form-item>
                <el-form-item label="性别：" class="inlineBlock">
                  <el-radio-group v-model="pageAjax.data.gender" size="medium">
                    <el-radio border :label="1">男</el-radio>
                    <el-radio border :label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="联系电话："
                  class="inlineBlock"
                  prop="contractPhone"
                >
                  <el-input
                    placeholder="联系电话"
                    v-model="pageAjax.data.contractPhone"
                  >
                  </el-input>
                </el-form-item>
                <div style="display: inline-block;position: relative;">
                  <el-form-item
                    label="身份证号码："
                    class="inlineBlock"
                    prop="idCard"
                  >
                    <el-input
                      style="width: 480px;"
                      placeholder="身份证号码"
                      v-model="pageAjax.data.idCard"
                      @focus="rIdcardFocus"
                    >
                    </el-input>
                    <span class="text-warning text-idCard"
                      >*
                      因身份证是识别主播并计算业绩收益的唯一有效标识，请您准确填写</span
                    >
                  </el-form-item>
                </div>
                <el-form-item
                  class="inlineBlock ml20"
                  label="选择直播平台："
                  prop="platform"
                >
                  <el-select
                    v-model="pageAjax.data.platform"
                    placeholder="选择直播平台"
                  >
                    <el-option
                      v-for="item in biPlatformListSupAjax.data"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="直播Id："
                  class="inlineBlock"
                  prop="anchorNo"
                >
                  <el-input
                    placeholder="直播Id"
                    v-model="pageAjax.data.anchorNo"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="签约状态："
                  class="inlineBlock"
                  prop="signStatus"
                >
                  <el-select
                    v-model="pageAjax.data.signStatus"
                    placeholder="请选择签约状态"
                  >
                    <el-option
                      v-for="item in alone.signStatus"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="所属运营："
                  class="inlineBlock"
                  prop="userId"
                >
                  {{
                    pageAjax.data.userId
                      ? " 已选运营(" + pageAjax.data.bindingNickName + ")"
                      : " 还没选择运营 "
                  }}
                  <el-button
                    type="text"
                    @click="rShowBindAgentDrawerCp"
                    size="mini"
                    >请选择所属运营</el-button
                  >
                </el-form-item>
              </div>
              <el-divider></el-divider>
              <div class="mi-upload">
                <div class="mi-title">
                  上传图片(最多5张，第一张默认为主播头像)
                </div>

                <div class="m-files">
                  <div class="m-preview clearfix">
                    <div
                      class="m-file"
                      v-for="(item, index) in pageAjax.data.imageList"
                      :key="index"
                    >
                      <div class="m-operation flex item-v-center item-h-center">
                        <i
                          class="el-icon-delete"
                          @click="rDeleteUploadImg(index)"
                        ></i>
                      </div>
                      <img :src="item" alt="" />
                    </div>
                    <div
                      class="m-file m-addBtn flex item-v-center item-h-center"
                    >
                      <el-upload
                        class="diy-uploadBtn fr"
                        :action="uploadImgAjax.config.url"
                        :headers="uploadImgAjax.config.headers"
                        :multiple="false"
                        name="file"
                        ref="uploadImg"
                        accept=".jpg, .gif, .jpeg, .png"
                        :show-file-list="false"
                        :disabled="uploadImgAjax.config.disabled"
                        :on-success="rUploadImgSuc"
                        :on-error="rUploadImgFail"
                        :on-progress="rUploadImgProgress"
                        :before-upload="rUploadImgBefore"
                        :limit="1"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </div>
                  </div>
                </div>
              </div>
              <el-divider></el-divider>
              <div class="mi-upload">
                <div class="mi-title">
                  上传视频(最多3个)
                </div>
                <div class="m-files">
                  <div class="m-preview clearfix">
                    <div
                      class="m-file"
                      v-for="(item, index) in pageAjax.data.videoList"
                      :key="index"
                    >
                      <div class="m-operation flex item-v-center item-h-center">
                        <i
                          class="el-icon-delete"
                          @click="rDeleteUploadVideo(index)"
                        ></i>
                      </div>
                      <video :src="item"></video>
                    </div>
                    <div
                      class="m-file m-addBtn flex item-v-center item-h-center"
                    >
                      <el-upload
                        class="diy-uploadBtn fr"
                        :action="uploadVideoAjax.config.url"
                        :headers="uploadVideoAjax.config.headers"
                        :multiple="false"
                        name="file"
                        ref="uploadVideo"
                        accept=".mp4, .avi, .flv"
                        :show-file-list="false"
                        :disabled="uploadVideoAjax.config.disabled"
                        :on-success="rUploadvideoSuc"
                        :on-error="rUploadVideoFail"
                        :on-progress="rUploadVideoProgress"
                        :before-upload="rUploadVideoBefore"
                        :limit="1"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </div>
                  </div>
                </div>
              </div>
              <el-divider></el-divider>
              <div class="c-videoLink">
                <el-form-item label="增加视频链接">
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-circle-plus-outline"
                    @click="rAddVideoLink"
                    >增加视频链接</el-button
                  >
                </el-form-item>
                <div class="block">
                  <el-form-item
                    v-for="(item, index) in pageAjax.data.videoLinkList"
                    :label="'视频链接' + (index + 1)"
                    :key="index"
                    class="block"
                  >
                    <el-input
                      v-model="pageAjax.data.videoLinkList[index]"
                    ></el-input>
                    <el-button @click="rDeleteVideoLink(index)">删除</el-button>
                  </el-form-item>
                </div>
              </div>
              <el-form-item class="block tc">
                <el-button type="primary" @click="rSubmitForm">提交</el-button>
                <el-button @click="back">取消</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- bindAgentDrawerCp -->
    <el-drawer
      :title="bindAgentDrawerCp.config.title"
      :visible.sync="bindAgentDrawerCp.config.visible"
      :direction="bindAgentDrawerCp.config.direction"
      :size="bindAgentDrawerCp.config.size"
      :close="rCloseBindAgentDrawerCp"
    >
      <div class="f-agent">
        <div class="c-content">
          <el-row class="">
            <el-col :span="14" :offset="5">
              <el-form ref="agent" label-width="80px" :inline="true">
                <el-form-item label="搜索运营">
                  <el-input
                    v-model="bindAgentDrawerCp.data.searchStr"
                    placeholder="请输入运营昵称/微信号搜索"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="rSubmitAgentSearchForm"
                    >提交</el-button
                  >
                </el-form-item>
              </el-form>
              <div class="c-main">
                <el-table :data="agentSearchAjax.data" style="width: 100%">
                  <el-table-column width="55">
                    <template slot-scope="scope">
                      <el-radio
                        :label="scope.row.userId"
                        @change="rSelectAgent(scope.row.nickName)"
                        v-model="bindAgentDrawerCp.data.agentId"
                        >&nbsp;</el-radio
                      >
                    </template>
                  </el-table-column>
                  <el-table-column label="头像" width="95px">
                    <template slot-scope="scope">
                      <img class="c-avatar" :src="scope.row.avatarUrl" alt="" />
                    </template>
                  </el-table-column>
                  <el-table-column label="昵称">
                    <template slot-scope="scope">
                      <div class="">
                        {{ scope.row.nickName || "无" }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="姓名">
                    <template slot-scope="scope">
                      <div class="">
                        {{ scope.row.realName || "无" }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="手机号码">
                    <template slot-scope="scope">
                      <div class="">
                        {{ scope.row.phone || "无" }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="微信号">
                    <template slot-scope="scope">
                      <div class="">
                        {{ scope.row.wxNo || "无" }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="tc mt20">
                  <el-button type="primary" @click="rBindAgent">绑定</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="c-content">
          <el-row class="">
            <el-col :span="14" :offset="5">
              <div class="c-main">
                <el-card
                  class="c-card"
                  v-if="agentSearchCp.data && agentSearchCp.data.length"
                >
                  <div
                    class="c-item"
                    v-for="item in agentSearchCp.data"
                    :key="item.id"
                  >
                    <div class="c-UserInfo">
                      <div class="c-avatar">
                        <img :src="item.avatarUrl" alt="" />
                      </div>
                      <div class="c-nameInfo">
                        <p class="c-name">{{ item.nickName }}</p>
                        <p class="c-station">{{ item.platformName }}</p>
                      </div>
                      <!-- <div class="c-copyBtn">
                      复制微信
                    </div> -->
                    </div>
                  </div>
                </el-card>
                <div class="p20 tc" v-else>
                  没有任何数据
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { addActorByUnion, checkActorIdcard } from "@/api/actor.js";
import { getAgentList } from "@/api/user.js";
import { getBiPlatformList } from "@/api/others.js";
import _ from "lodash";

export default {
  name: "addActorByUnion",
  data() {
    var checkMobile = (rule, value, callback) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        return callback(new Error("请输入正确号码"));
      }
      callback();
    };
    var checkIdCard = (rule, value, callback) => {
      let _that = this;
      if (_that.checkIdcardSupAjax.loading) {
        return;
      }
      if (!/^\d{18}$/.test(value)) {
        return callback(new Error("身份证格式错误"));
      } else {
        if (_that.checkIdcardSupAjax.hasCheck) {
          callback();
          return;
        }
        _that.checkIdcardSupAjax.loading = true;
        checkActorIdcard({ params: { type: 1, value: value } })
          .then(resp => {
            let respData = resp.data || {};

            if (respData.code === _that.STATUS.success[0]) {
              _that.checkIdcardSupAjax.hasCheck = true;
              _that.$message.success({
                message: respData.msg || "身份证可以使用"
              });
              callback();
            } else {
              _that.$message.error(respData.msg || "身份证重复或错误");
              return callback(new Error("身份证错误"));
            }
          })
          .finally(() => {
            _that.checkIdcardSupAjax.loading = false;
          });
      }
    };
    return {
      pageAjax: {
        loading: false,
        data: {
          realName: "",
          gender: 1,
          wxNo: "",
          contractPhone: "",
          idCard: "",
          anchorNo: "",
          signStatus: "",
          platform: "",
          userId: "",
          imageList: [],
          videoList: [],
          videoLinkList: [],
          onlineType: "union"
        },
        rules: {
          realName: [
            { required: true, message: "请输入昵称", trigger: "blur" }
          ],
          wxNo: [{ required: true, message: "请输入微信号", trigger: "blur" }],
          contractPhone: [
            { required: true, message: "请输入联系电话", trigger: "blur" },
            { validator: checkMobile, trigger: "blur" }
          ],
          idCard: [
            { required: true, message: "请输入身份证", trigger: "blur" },
            { validator: checkIdCard, trigger: "blur" }
          ],
          signStatus: [
            { required: true, message: "请选择签约状态", trigger: "blur" }
          ],
          anchorNo: [
            { required: true, message: "请输入直播id", trigger: "blur" }
          ],
          userId: [
            { required: true, message: "请选择要绑定的运营", trigger: "blur" }
          ],
          platform: [
            { required: true, message: "请选择直播平台", trigger: "blur" }
          ]
        }
      },
      uploadImgAjax: {
        loading: false,
        config: {
          disabled: false,
          headers: {
            Authorization: ""
          },
          url: "/bs/upload"
        }
      },
      uploadVideoAjax: {
        loading: false,
        config: {
          disabled: false,
          headers: {
            Authorization: ""
          },
          url: "/bs/upload"
        }
      },
      agentSearchAjax: {
        loading: false,
        lock: false,
        paging: {
          pages: 1, // 总页数
          current: 0, // 当前页
          total: 1, // 总数量
          pageSize: 10 // 每页数量
        },
        data: []
      },
      biPlatformListSupAjax: {
        data: []
      },
      checkIdcardSupAjax: {
        loading: false,
        hasCheck: false
      },
      alone: {
        signStatus: [
          {
            name: "试播",
            value: "SIGNING"
          },
          {
            name: "已开播",
            value: "SIGNED"
          }
        ]
      },
      agentSearchCp: {
        loading: false,
        config: {
          title: "",
          visible: false,
          direction: "ttb",
          size: "20%"
        },
        data: []
      },
      bindAgentDrawerCp: {
        loading: false,
        config: {
          title: "",
          visible: false,
          direction: "ttb",
          size: "75%"
        },
        data: {
          searchStr: "",
          agentId: "",
          agentNickName: ""
        }
      }
    };
  },
  created() {
    let _that = this;
    // console.log('d', this.$store.getters.wantPlatformListOffspringnTreeData(1));
    _that.uploadImgAjax.config.headers.Authorization =
      "bearer " + _that.$store.state.sid.access_token;
    _that.getBiPlatformListData();
  },
  methods: {
    rIdcardFocus() {
      this.checkIdcardSupAjax.hasCheck = false;
    },
    /* 上传图片 */
    rUploadImgSuc(respData) {
      let _that = this;
      _that.uploadImgAjax.config.disabled = false;
      _that.uploadImgAjax.loading.close();
      _that.$refs.uploadImg.clearFiles();
      if (respData.code === _that.STATUS.success[0]) {
        _that.pageAjax.data.imageList.push(respData.data.fileUrl);
        // _that.getPageData();
      } else {
        _that.$message.error({
          message: respData.msg || "上传失败",
          onClose() {}
        });
      }
    },
    rUploadImgFail() {
      let _that = this;
      _that.uploadImgAjax.loading.close();
      _that.uploadImgAjax.config.disabled = false;
      _that.$refs.uploadImg.clearFiles();
      _that.$message.error({
        message: "上传错误，请查看网络或联系管理员",
        onClose() {}
      });
    },
    rUploadImgProgress() {},
    rUploadImgBefore() {
      let _that = this;
      if (_that.pageAjax.data.imageList.length >= 5) {
        _that.$message.error({
          message: "图片超过5张，请删除后再上传",
          onClose() {}
        });
        return false;
      }
      _that.uploadImgAjax.loading = this.$loading({
        text: "上传中。。。",
        lock: true
      });
    },
    rDeleteUploadImg(index) {
      this.pageAjax.data.imageList.splice(index, 1);
    },
    /* 上传视频 */
    rUploadvideoSuc(respData) {
      let _that = this;
      _that.uploadVideoAjax.config.disabled = false;
      _that.uploadVideoAjax.loading.close();
      _that.$refs.uploadVideo.clearFiles();
      if (respData.code === _that.STATUS.success[0]) {
        _that.pageAjax.data.videoList.push(respData.data.fileUrl);
      } else {
        _that.$message.error({
          message: respData.msg || "上传失败",
          onClose() {}
        });
      }
    },
    rUploadVideoFail() {
      let _that = this;
      _that.uploadVideoAjax.loading.close();
      _that.uploadVideoAjax.config.disabled = false;
      _that.$refs.uploadVideo.clearFiles();
      _that.$message.error({
        message: "上传错误，请查看网络或联系管理员",
        onClose() {}
      });
    },
    rUploadVideoProgress() {},
    rUploadVideoBefore() {
      let _that = this;
      if (_that.pageAjax.data.videoList.length >= 3) {
        _that.$message.error({
          message: "视频超过3个，请删除后再上传",
          onClose() {}
        });
        return false;
      }
      _that.uploadVideoAjax.loading = this.$loading({
        text: "上传中。。。",
        lock: true
      });
    },
    rDeleteUploadVideo(index) {
      this.pageAjax.data.videoList.splice(index, 1);
    },
    rAddVideoLink() {
      let _that = this;
      if (_that.pageAjax.data.videoLinkList.length >= 3) {
        _that.$message.error("图片超过3张，请删除后再上传");
        return;
      }
      _that.pageAjax.data.videoLinkList.push("");
    },
    rDeleteVideoLink(index) {
      let _that = this;
      _that.pageAjax.data.videoLinkList.splice(index, 1);
    },
    rShowBindAgentDrawerCp() {
      let _that = this;
      _that.bindAgentDrawerCp.data.agentId = "";
      _that.bindAgentDrawerCp.data.searchStr = "";
      _that.agentSearchAjax.data.length = 0;
      _that.bindAgentDrawerCp.config.visible = true;
    },
    rSubmitAgentSearchForm() {
      let _that = this;
      let searchStr = _that.bindAgentDrawerCp.data.searchStr;
      if (!searchStr) {
        _that.$message.error("搜索条件不能为空");
        return;
      }
      _that.getAgentData();
    },
    rSelectAgent(nickName) {
      let _that = this;
      _that.bindAgentDrawerCp.data.agentNickName = nickName;
    },
    rBindAgent() {
      let _that = this;
      let agentId = _that.bindAgentDrawerCp.data.agentId;
      let nickName = _that.bindAgentDrawerCp.data.agentNickName;

      if (!agentId) {
        _that.$message.error("请选择要绑定的运营");
        return;
      }

      _that.pageAjax.data.userId = agentId;
      _that.pageAjax.data.bindingNickName = nickName;
      _that.bindAgentDrawerCp.config.visible = false;
    },
    rCloseBindAgentDrawerCp() {
      let _that = this;
      _that.bindAgentDrawerCp.data.agentId = "";
      _that.bindAgentDrawerCp.data.agentNickName = "";
      _that.bindAgentDrawerCp.data.searchStr = "";
    },
    rSubmitForm() {
      let _that = this;
      let submitData = _.cloneDeep(_that.pageAjax.data);

      _that.$refs.submitForm.validate(valid => {
        if (valid) {
          for (
            var i = 0, lenI = submitData.videoLinkList.length;
            i < lenI;
            i++
          ) {
            if (
              !/^(http:\/\/)|(https:\/\/)/.test(submitData.videoLinkList[i])
            ) {
              _that.$message.error(
                "视频链接" + (i + 1) + "格式错误，必须以http或https开头"
              );
              return;
            }
          }

          if (
            !submitData.imageList.length &&
            !submitData.videoList.length &&
            !submitData.videoLinkList.length
          ) {
            _that.$message.error("图片、视频、视频链接不能都为空");
            return;
          }
          submitData.imageList = submitData.imageList;
          submitData.videoList = submitData.videoList;
          submitData.videoLinkList = submitData.videoLinkList;

          if (_that.pageAjax.loading || _that.pageAjax.btnDisabled) {
            return;
          }
          _that.pageAjax.loading = true;
          _that.pageAjax.btnDisabled = true;

          addActorByUnion(submitData)
            .then(resp => {
              let respData = resp.data || {};

              if (respData.code === _that.STATUS.success[0]) {
                _that.$message.success({
                  message: respData.msg || "添加失败",
                  onClose: function() {
                    _that.goRefresh(-1);
                  },
                  duration: 1200
                });
              } else {
                _that.pageAjax.btnDisabled = false;
                _that.$message.error(respData.msg || "添加失败");
              }
            })
            .finally(() => {
              _that.pageAjax.loading = false;
            });
        } else {
          _that.$message.error("请填写完整资料");
          return false;
        }
      });
    },
    getAgentData() {
      let _that = this;
      let searchStr = _that.bindAgentDrawerCp.data.searchStr;

      if (_that.agentSearchAjax.loading) {
        return;
      }

      _that.agentSearchAjax.loading = true;
      getAgentList({ params: { searchStr: searchStr } })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.agentSearchAjax.data = respData.data;
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.agentSearchAjax.loading = false;
        });
    },
    getBiPlatformListData() {
      let _that = this;
      return getBiPlatformList()
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            let arr = respData.data.filter(item => {
              if (item.value != "all") {
                return item;
              }
            });
            _that.biPlatformListSupAjax.data = arr;
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {});
    },
    back() {
      this.goRefresh(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .block {
    display: block;
  }
  .inlineBlock {
    display: inline-block;
  }
  .mi-title {
    color: #999;
  }
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-main {
    margin-top: 20px;
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .mi-upload {
    padding: 20px;
    .mi-title {
      margin-bottom: 20px;
    }
    .m-files {
    }
    .m-file {
      position: relative;
      float: left;
      width: 150px;
      height: 150px;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #ebeef5;
      box-sizing: border-box;
      img,
      video {
        display: block;
        width: 100%;
        height: 100%;
      }
      &:hover .m-operation {
        opacity: 1;
      }
    }
    .m-operation {
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
      transition: opacity 0.4s;
      i {
        font-size: 20px;
        padding: 10px 20px;
      }
    }
    .m-addBtn {
      border: 1px dashed #c0ccda;
      border-radius: 10px;
      font-size: 28px;
      color: #ebeef5;
      &:hover {
        border-color: #409eff;
        color: #409eff;
      }
    }
  }
  .c-videoLink {
    .el-input {
      margin-right: 10px;
      width: 270px;
      vertical-align: top;
    }
  }
  .c-liveExpEditVoList {
    .c-liveExpEditVo {
      border-top: 1px solid #ebeef5;
      padding-top: 20px;
      .mi-title {
        padding-left: 20px;
      }
    }
  }
  .f-agent {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    .c-content {
      height: 100%;
      padding-bottom: 20px;
      padding-top: 60px;
      overflow: auto;
    }
    .c-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
  }
}
</style>
<style lang="scss">
.label-must .el-form-item__label:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.text-idCard {
  font-size: 12px;
  position: absolute;
  left: 0;
  bottom: -28px;
}
.is-error {
  .text-idCard {
    left: 78px;
    color: #3e4cf1;
  }
}
</style>
